<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .parent {
    border: 3px solid #333;
    text-align: center;
    background: #56ec95;
    display: flex;
  }
  .child {
    text-align: center;
  }
  .child1 {
    background: #d78afa;
  }
  .child2 {
    background: #ffc786;
  }

  button {
    padding: 10px 15px;
    border-radius: 0;
    border-width: 0px;
    background: #d6f0e4;
    border: 1px solid #2ab47b;
    cursor: pointer;
  }
  button[disabled] {
    cursor: not-allowed;
  }
</style>
<body>
  <h3 style="color: #333;">弹性盒左侧固定, 右侧flex:1, 右侧一直添加内容的表现方式</h3>
  <hr style="border-width: 0px; border-bottom: 1px solid #ccc;"/>

  <div style="height: 220px;">
    <div class="parent" title="parent" style="width: 500px; height: 100px;">
      <div class="child child1" title="child1" style="width: 800px; height: 200px;">1</div>
      <div class="child child2" title="child2" style="flex: 1;">2</div>
    </div>
  </div>

  <div style="display:flex; gap: 30px;">
    <div>
      <div>
        <button id="button1">child2 添加120个数字</button>
      </div>
      <textarea readonly style="width: 550px; height: 150px; margin-top: 10px; background: #f9f9f9; border-color: #ddd;">
  因为左侧盒子范围是(minWidth, width, maxWidth之间), 
  而右侧盒子是根据内容决定的。
  所以当不断添加内容后, 会挤压右侧盒子, 直到宽度为内容区, 
  比如一线天或英文单词, 当左侧盒子为基础尺寸, 无法缩小后, 
  右侧加入内容后会溢出盒子。
      </textarea>
    </div>
    <div>
      <div>
        <button id="button2">parent宽度改为1000px, child2 添加 width: 0</button>
        <button id="button3">child2 添加 word-break: break-all</button>
      </div>
      <textarea readonly style="width: 550px; height: 150px; margin-top: 10px; background: #f9f9f9; border-color: #ddd;">
  设置flex1时候, 还需要设置width: 0, 才可以正确自适应。
  child2 如果不设宽度width: 0, 宽度则有内容尺寸决定, 
  child2 如果设置宽度width: 0, 宽度则由flex-grow 撑开。
      </textarea>
    </div>
  </div>
  
</body>
<!-- 
  问题：
  【外小里大】, 父盒子flex宽度500, 子盒子2, flex:1, 一直添加文字怎么样, 会如何展示?

  答案：
  child2盒子会先挤压child1盒子, 占掉剩余空间, 然后溢出父盒子, 再然后出现滚动条。
 -->

 <script>
  const child2 = document.querySelector('.child2')
  const parent = document.querySelector('.parent')

  // 延迟xxms后执行添加文字
  const sleep = (timer, i) => new Promise((resolve, reject) => {
    setTimeout(() => {
      child2.innerText = child2.innerText + `${i}`
      resolve()
    }, timer)
  })
  
  async function addText() {
    for(let i = 0; i < 120; i++) {
      await sleep(200, i)
    }
  }

  const button2 = document.getElementById('button2')
  button2.onclick = function() {
    parent.style.width = '1000px'
    child2.style.width = '0px'
  }
  const button3 = document.getElementById('button3')
  button3.onclick = function() {
    child2.style.wordBreak = 'break-all'
  }

  const button1 = document.getElementById('button1')
  button1.disabled = false
  button2.disabled = false
  button1.onclick = function() {
    button1.disabled = true
    button2.disabled = true
    addText().then(() => {
      button2.disabled = false
    })
  }
 </script>
</html>
